<template>
	<div class="home">
		<div class="c-bg" v-for="(item, index) in coupons.popovers" :key="index">
			<div class="c-r">
				<div class="app">{{ item.data.expiryInfo }}</div>
				<div class="much">
					<span style="font-size: 18px; margin-left: 25px; vertical-align: top">￥</span><span>{{ item.data._effect }}</span
					><span style="font-size: 12px; margin-left: 8px">{{ item.data.couponDesc }}</span>
				</div>
			</div>
			<div class="c-l"><div class="get">已领取</div></div>
		</div>

		<div style="height: 85px"></div>
	</div>
</template>

<script>
export default {
	name: "WorkspaceJsonCouponsComponents",

	props: ["coupons"],

	data() {
		return {};
	},

	mounted() {},

	methods: {},
};
</script>

<style lang="scss" scoped>
.coupons {
	.c-bg {
		height: 85px;
		margin: 0 auto;
		background-image: url("/public/img/detail/coupon.webp");
		background-size: 365px 85px;
		background-position: 10px;
		background-repeat: no-repeat;
		border-radius: 10px;
		display: flex;
		padding-bottom: 15px;
		.c-r {
			// height: 100%;
			width: 70%;
			display: flex;
			flex-direction: column-reverse;
			.app {
				margin-bottom: 15px;
				line-height: 1;
				margin-left: 26px;
				font-size: 12px;
				color: hsla(0, 0%, 100%, 0.6);
			}
			.much {
				color: #fff;
				font-size: 35px;
				vertical-align: baseline;
			}
		}
		.c-l {
			// height: 100%;
			width: 30%;
			border-left: thin dashed #fff;
			position: relative;
			.get {
				color: #fff;
				position: absolute;
				right: 24px;
				top: 32px;
				z-index: 4;
				width: 88px;
				height: 35px;
				font-size: 15px;
				border-radius: 35px;
				background: rgb(255, 189, 189);
				text-align: center;
				line-height: 35px;
			}
		}
	}
}
</style>
